<template>
  <div>
    <SelectTab :list="['手机登录', '邮箱登录']" @selectIndex="selectType" />

    <ErrorMsg class="error-msg" v-if="errMsg">{{ errMsg }}</ErrorMsg>

    <Form
      class="form"
      ref="form"
      :type="type"
      :model="model"
      :rules="rules"
      @errMsg="handleErrMsg"
      @submit.native.prevent="handleSubmit"
    >
      <FormItem
        v-for="(item, index) of formItemsData"
        :key="index"
        :prop="item"
        v-model="item.vModel"
      />

      <div class="flex-box">
        <InputCheckbox label="确认已经满18周岁" v-model="checked" />
        <div class="link" @click="$emit('changeComType', 'resetPassword')">
          忘记密码
        </div>
      </div>

      <SubmitButton class="btn" :loadStatus="loadStatus"> 登录 </SubmitButton>
    </Form>

    <div class="link margin-top_20" @click="$emit('changeComType', 'register')">
      还没有账号?点击注册
    </div>
  </div>
</template>

<script>
import { fromMixin } from 'assets/js/mixin.js'
import InputCheckbox from 'common/form/input-checkbox'
import AuthModel from 'api/auth.js'
const authModel = new AuthModel()

export default {
  mixins: [fromMixin],
  data() {
    return {
      model: {
        phone: {
          name: 'phone',
          vModel: '',
          inputType: 'number',
          placeholder: '手机号码'
        },
        password: {
          name: 'password',
          vModel: '',
          placeholder: '密码',
          formItemType: 'password'
        },
        email: {
          name: 'email',
          vModel: '',
          inputType: 'email',
          placeholder: '邮箱',
        },
      },
      rules: {
        phone: [
          { required: true, message: '手机号不能为空' },
          { pattern: /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/, message: '手机号不正确' }
        ],
        password: [
          { required: true, message: '请输入密码' },
          { type: 'string', message: '最少输入6位数', validate: (rule, value) => value.length >= 6 }
        ],
        email: [
          { required: true, message: '邮箱不能为空' },
          { pattern: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/, message: '邮箱格式不正确' }
        ]
      },
      formItems: {
        phone: ['phone', 'password'],
        email: ['email', 'password'],
      },
      checked: true,
      errMsg: '',
      loadStatus: false
    }
  },

  methods: {

    async handleSubmit() {
      if (!this.checked) {
        this.errMsg = '请勾选确认已满18周岁后登录'
        return
      }

      const res = await this.$refs.form.validate()
      const model = this.model
      let number

      if (res.status) {

        if (this.type == 'phone') {
          number = model.phone.vModel
        } else {
          number = model.email.vModel
        }

        this.loadStatus = true
        const result = await authModel.login({ number, password: model.password.vModel })

        if (result.code != 0) {
          this.errMsg = result.mes
        }
        this.loadStatus = false
        return
      }
      this.errMsg = res.msg
    }
  },

  components: {
    InputCheckbox
  },
}
</script>

<style lang="less" scoped>
.form {
  margin-top: 20px;
}

.error-msg {
  margin-top: 20px;
}

.btn {
  margin-top: 20px;
}

.flex-box {
  display: flex;
  justify-content: space-between;

  .link {
    color: #848492;
    font-size: 14px;
    &:hover {
      color: #e9b10e;
      text-decoration: underline;
    }
  }
}

.link {
  font-size: 16px;
  text-align: center;
  color: #848492;
  &:hover {
    text-decoration: underline;
  }
}

.margin-top_20 {
  margin-top: 20px;
}
</style>